<template>
<div class="cate-edit pb60">
    <Form :model="detailInfo" ref="cateEdit" label-position="right" :rules="cateEditValidate" :label-width="80" action="javascript:void(0)">
        <FormItem label="父栏目" prop="parentId">
            <TreeSelect clearable v-model="detailInfo.parentId" :data="cateSelect" v-width="200"></TreeSelect>
        </FormItem>
        <FormItem label="栏目名称" prop="name">
            <Input v-model="detailInfo.name"></Input>
        </FormItem>
        <FormItem label="标题" prop="title">
            <Input v-model="detailInfo.title"></Input>
        </FormItem>
        <FormItem label="关键字" prop="keyword">
            <Input v-model="detailInfo.keyword"></Input>
        </FormItem>
        <FormItem label="描述" prop="description">
            <Input type="textarea" v-model="detailInfo.description" :autosize="{minRows:4,maxRows:8}"></Input>
        </FormItem>
        <!-- 上传 -->
        <FormItem label="缩略图">
            <upload-thumb v-model="detailInfo.thumb" ref="uploadthumb" :defaultList="thumbList"></upload-thumb>
        </FormItem>
        <FormItem label="栏目内容">
            <tinymce-editor ref="editContent" :tinymceValue="detailInfo.content"></tinymce-editor>
        </FormItem>
        <FormItem label="单页面">
            <i-switch :true-value="1" :false-value="0" v-model="detailInfo.type" size="large">
                <template #open>是</template>
                <template #close>否</template>
            </i-switch>
        </FormItem>
        <FormItem label="栏目模板">
            <Input v-model="detailInfo.cateTpl"></Input>
        </FormItem>
        <FormItem label="文章模板">
            <Input v-model="detailInfo.artTpl"></Input>
        </FormItem>
        <FormItem label="是否显示">
            <i-switch :true-value="1" :false-value="0" v-model="detailInfo.display" size="large">
                <template #open>是</template>
                <template #close>否</template>
            </i-switch>
        </FormItem>
        <FormItem label="是否外链">
            <i-switch :true-value="1" :false-value="0" v-model="detailInfo.linkFlag" size="large">
                <template #open>是</template>
                <template #close>否</template>
            </i-switch>
        </FormItem>
        <FormItem label="外链" v-if="detailInfo.linkFlag == 1">
            <Input v-model="detailInfo.url" placeholder="输入外部链接地址..."></Input>
        </FormItem>
        <FormItem label="排序" prop="sort">
            <InputNumber :max="9999" :min="0" v-model="detailInfo.sort"></InputNumber>
        </FormItem>
        <FormItem>
            <Button style="margin-right: 8px" @click="goBack()">返回</Button>
            <Button type="primary" @click="handleSubmit('cateEdit')">提交</Button>
        </FormItem>
    </Form>
</div>
</template>

<script>
import UploadThumb from '../.././components/thumb.vue'
import TinymceEditor from '../.././components/tinymce.vue'
export default {
    name: 'CateEdit',
    data() {
        return {
            detailId: 0,
            cateSelect: [],
            detailInfo: {
                'parentId': 0,
                'name': '',
                'title': '',
                'keyword': '',
                'description': '',
                'thumb': '',
                'content': '',
                'linkFlag': 0,
                'url': '',
                'cateTpl': 'list',
                'artTpl': 'show',
                'display': 1,
                'type': 0,
                'sort': 0,
            },
            thumbList: [],
            cateEditValidate: {
                parentId: [
                    { required: true,type:'integer', message: '栏目必须填写', trigger: 'change' }
                ],
                name: [
                    { required: true, message: '名称必须填写', trigger: 'blur' }
                ],
                title: [
                    { required: true, message: '标题必须填写', trigger: 'blur' }
                ],
                description: [
                    { required: false, message: '描述不能超过255个字符', max: 255, trigger: 'blur' }
                ],
                cateTpl: [
                    { required: true, message: '栏目模板必须填写', trigger: 'blur' }
                ],
                artTpl: [
                    { required: true, message: '文章模板必须填写', trigger: 'blur' }
                ],
                sort: [
                    { required: true, type: 'integer', message: '排序必须填写', trigger: 'blur' }
                ],
            }
        }
    },
    // 组件
    components: {
        UploadThumb,
        TinymceEditor
    },
    created() {
        this.detailId = this.$route.query.id;
        this.getData(this.detailId);
    },
    methods: {
        handleSubmit(name) {
            this.$refs[name].validate((valid) => {
                if (!valid) {
                    this.$Message.error('请检查输入的信息是否正确！');
                } else {
                    // 图片
                    if (this.$refs['uploadthumb'].uploadList.length) {
                        this.detailInfo.thumb = this.$refs['uploadthumb'].uploadList[0].url;
                    }else{
						this.detailInfo.thumb = '';
					}
                    // 富文本
                    this.detailInfo.content = this.$refs['editContent'].tinymce_value
                    const params = this.detailInfo
                    this.$api.cate.update(params).then(res => {
                        this.$router.back();
                    });
                }
            })
        },
        goBack(){
            this.$router.back();
        },
        getData(id) {
            this.$api.cate.select().then(res => {
                this.cateSelect = res.result;
            });
            this.$api.cate.detail({ detailId: id }).then(res => {
                this.detailInfo = res.result;
                if (res.result.thumb != '' && res.result.thumb != null) {
                    this.thumbList = [{ 'name': '图片文件', 'url': res.result.thumb, 'status': 'finished' }];
                }else{
                    this.thumbList = [];
                }
                this.$refs['editContent'].tinymce_value = res.result.content
            });
        },
    }
}
</script>
